<template>
  <div class="project-num-summary">
    <div class="model-title">
      <div v-if="stepBtnShow" class="text">
        3、确认清单计量汇总表
      </div>
      <span v-else></span>
      <div style="display: flex;">
        <BaseButton v-permission="{ btnCode: 'dlyh_d433_e38_2' }" @click="exportSummary">导出计量汇总表</BaseButton>
        <BaseButton v-show="stepBtnShow" v-permission="{ btnCode: 'dlyh_d433_e37_2' }" @click="exportParticulars">导出计量明细表</BaseButton>
    </div>
    </div>
    <div class="table-warp">
        <BaseTable 
        slot="table"
        ref="table" 
        class="table"  
        :data="list" 
        :columns="columns"
        :span-method="arraySpanMethod"
        >
            <template #serialNumber="{ scope: { row} }">
                <span v-if="row.level === 1">{{ numToChinese(row.serialNumber) }}</span>
                <span v-else>{{ row.serialNumber }}</span>
            </template>
            <template #unitCode="{ scope: { row} }">
            {{ row.unitSymbol }}
            </template>
        </BaseTable>
    </div>
    <div v-if="stepBtnShow" class="btn">
      <BaseButton type="second" @click="handleBack">上一步</BaseButton>
      <BaseButton type="second" @click="handleSave">保存关闭</BaseButton>
      <BaseButton v-permission="{ btnCode: 'dlyh_d433_e35_2' }" @click="handleSubmit">提交审批</BaseButton>
    </div>
  </div>
</template>
<script>
import { value2Name } from '@/filters'
import { ProjectLedgerModel } from '@/models'
// 导出
import { ProjectLedgerApi } from '@/api'
import downLoad from '@/utils/blob-download'

export default {
    components: {
      
    },
    filters: {
        value2Name
    },
    props: {
        curStep: {
            type: [Number],
            required: false,
            default: 3
        },
        stepBtnShow: {
            type: Boolean,
            default: true,
        },
        // 申请ID
        id: {
            type: [Number, String],
            default: ''
        },
    },
    data() {
        return {
            model: new ProjectLedgerModel(),
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            list: [], // list
            columns: [
               
                {
                    slot: 'serialNumber',
                    attrs: {
                        label: '序号',
                        prop: 'serialNumber',
                    }
                },
                {
                    attrs: {
                        label: '章次',
                        prop: 'chapterSequenceCode',
                    }
                },
                {
                    attrs: {
                        label: '科目名称',
                        prop: 'chapterSequenceName',
                        'show-overflow-tooltip': true,
                    }
                },
                {
                    attrs: {
                        label: '金额（元）',
                        prop: 'totalAmount',
                        'show-overflow-tooltip': true
                    }
                },
            ],
            listLoading: false
        
        }
    },
    watch: {
        curStep: {
            immediate: true,
            handler(val) {
                if (val === 2) {
                    this.getList()
                }
            }
        },
        id: {
            immediate: true,
            handler(val) {
                if (val) {
                    this.id = val
                }
            }
        }
    },
    methods: {
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === this.list.length - 1 || rowIndex === this.list.length - 2 || rowIndex === this.list.length - 3) {
                if (columnIndex === 1) {
                    return [1, 2]
                } else if (columnIndex === 2) {
                    return [0, 0]
                }
            }
        },
        getList() {
            this.listLoading = true
            this.model.billQuantitiesCollection({ id: this.id}).then(res => {
                this.list = [...res.chapterItemList]
                const lenth = res.chapterItemList.length
                this.list.push(
                    {
                        serialNumber: lenth + 1,
                        chapterSequenceCode: res.chapterTotalDescription,
                        totalAmount: res.chapterTotalAmount
                    }
                )
                this.list.push(
                    {
                        serialNumber: lenth + 2,
                        chapterSequenceCode: '计日工合计',
                        totalAmount: res.dayWorkTotalAmount
                    }
                )
                this.list.push(
                    {
                        serialNumber: lenth + 3,
                        chapterSequenceCode: '汇总金额',
                        totalAmount: res.allTotalAmount
                    }
                )
            }).finally(() => {
                this.listLoading = false
            })
        },
        // 上一步
        handleBack() {
            this.$emit('back', this.curStep)
        },
        // 保存并关闭
        handleSave() {
            this.$router.push({
                path: './index',
            })
        },
        // 提交
        handleSubmit() {
            this.model.applicationSubmit({id: this.id}).then(res => {
                this.$message({
                    type: 'success',
                    message: '提交成功！',
                    duration: 500,
                    onClose: () => {
                        this.$router.push({
                            path: './detail',
                            query: {
                                id: this.id
                            }
                        })
                    }
                })
            })
        },
        // 导出计量汇总表
        exportSummary() {
            this.exportLoading = true
            const path = ProjectLedgerApi.applicationStatisticsExportPath
            const params = {
                id: this.id,
            }
            downLoad(path, {...params}, '', 'Excel', () => {
                this.exportLoading = false
            })
        },
        // 导出计量明细表
        exportParticulars() {
            this.exportLoading = true
            const path = ProjectLedgerApi.applicationParticularsExportPath
            const params = {
                id: this.id,
            }
            downLoad(path, {...params}, '', 'Excel', () => {
                this.exportLoading = false
            })
        }
    }
}
</script>
<style scoped lang="scss">
.project-num-summary{
  height:  calc(100% - 90px);
  width: 100%;
  margin-top: 24px;
  box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.2);
  position: relative;
  .info{
   padding: 16px;
  }
  .handle-btn{
    display: flex;
  }
  .table-warp{
    width:100%;
    position: relative;
    .table{
        width:100%;
        min-height: 200px;
        overflow-y: auto;
    }
    .pagination{
        text-align: right;
        margin-right: 20px;
    }
  }
 
  .model-title{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(131, 145, 178, 0.1);
  }
  .btn{
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    // bottom: 24px;
  }
}
::v-deep .el-form-item{
    margin-bottom: 0px;
}

</style>
